<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>个人资料</title>
    <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        body {
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            Oxygen, Ubuntu, Cantarell, sans-serif;
          background-color: #f5f5f5;
        }
        .profile-content {
          background-color: #fff;
          padding: 20px;
        }
        .avatar-section {
          text-align: center;
          margin-bottom: 30px;
        }
        .avatar {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          margin-bottom: 10px;
        }
        .edit-avatar {
          color: #ff6b6b;
          text-decoration: none;
          font-size: 14px;
        }
        .info-item {
          display: flex;
          padding: 15px 0;
          border-bottom: 1px solid #eee;
        }
        .info-label {
          width: 80px;
          color: #333;
        }
        .info-value {
          flex: 1;
          color: #666;
        }
        .gender-options {
          display: flex;
          gap: 20px;
        }
        .gender-option {
          display: flex;
          align-items: center;
          gap: 5px;
        }
        .save-btn {
          display: block;
          width: 90%;
          margin: 30px auto;
          padding: 15px;
          background-color: #000;
          color: #fff;
          border: none;
          border-radius: 8px;
          font-size: 16px;
        }
    </style>
</head>
<body>
<main class="profile-content">
    <div class="avatar-section">
        <img id="avatarImg" src="" alt="用户头像" class="avatar"/>
        <a id="avatar" class="edit-avatar">修改头像</a>
    </div>

    <div class="info-item">
        <span class="info-label">账号</span>
        <span class="info-value">zhousg</span>
    </div>

    <div class="info-item">
        <span class="info-label">昵称</span>
        <span class="info-value">后海没有鱼</span>
    </div>

    <div class="info-item">
        <span class="info-label">性别</span>
        <div class="info-value">
            <div class="gender-options">
                <label class="gender-option">
                    <input type="radio" name="gender" checked/>
                    <span>男</span>
                </label>
                <label class="gender-option">
                    <input type="radio" name="gender"/>
                    <span>女</span>
                </label>
                <label class="gender-option">
                    <input type="radio" name="gender"/>
                    <span>未知</span>
                </label>
            </div>
        </div>
    </div>

    <div class="info-item">
        <span class="info-label">生日</span>
        <span class="info-value">2015-03-15</span>
    </div>

    <div class="info-item">
        <span class="info-label">所在地</span>
        <span class="info-value">北京市 北京市 东城区</span>
    </div>

    <div class="info-item">
        <span class="info-label">职业</span>
        <span class="info-value">市场营销专员</span>
    </div>

    <button class="save-btn">保存资料</button>
</main>
<script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.2.1/eruda.min.js"></script>
<script>
    eruda.init();
</script>
<script>
    document.querySelector("#avatar").onclick = () => {
      hdm.openGallery().then((res) => {
        document.querySelector("#avatarImg").src = res;
      });
    };
</script>
</body>
</html>
